<template>
  <view>
    <view style="background-color: #181816; height: 100vh;">
      <!-- 头部 -->
      <view class="header">
        <view class="header_bg">
          <image src="../../static/bg.png"></image>
        </view>
        <view class="header_title">
          <!-- 头部页面指引和消息 -->
          <view class="header_nav">
            <view class="nft_search">
              <view class="nav_content" style="display: flex;" @click="link">
                <image src="../../static/nft_search.png"></image>
                <a style="line-height: 55rpx;">链上查询</a>
              </view>
            </view>
            <view class="message_btn" @click="noticeCenter()">
              <image src="../../static/message_btn.png"></image>
            </view>
          </view>
        </view>

        <!-- 用户登录 -->
        <view class="header_personal">
          <view class="about_user">
            <view class="customer_head" v-model="head">
              <view class="customer-default" v-if="!userInfo.token">
                <image src="/static/user.png" mode="scaleToFill" />
              </view>
              <image
                class="customer-default"
                @click="login()"
                :src="head ? head : '/static/user.png'"
                v-else
              ></image>
              <view
                class="authentication"
                @click="verfiy()"
                v-show="authentication"
              >
                未认证
              </view>
            </view>
            <view
              class="login_status"
              @click="login"
              open-type="getUserInfo,getPhoneNumber"
              v-model="username"
            >
              <view class="login" v-show="!userInfo.token">
                <view class="login_text">请点击登录</view>
                <view
                  class="login_notice"
                  style="font-size: 26rpx; color: #666666;"
                >
                  登录后可查看您的数字藏品
                </view>
              </view>
              <view class="username" v-show="userInfo.token">
                {{ username ? username : '微信用户' }}
              </view>
            </view>
          </view>

          <!-- <view class="verify" @click="verfiy" v-show="authentication">
	         <button>实名认证</button>
	       </view> -->
        </view>
      </view>
      <!-- 内容 -->
      <view class="content">
        <view class="content1">
          <u-cell-group :border="false">
            <u-cell
              :border="true"
              icon="/static/MyCollection.png"
              iconStyle="width: 38rpx;height: 37rpx;"
              title="我的藏品"
              :value="myCollectionNum"
              titleStyle="font-family: PingFang-SC-Medium;color:#FFF;font-size: 28rpx;"
              @click="jump('/pages/mine/My_collection')"
              isLink
            ></u-cell>
            <u-cell
              :border="false"
              icon="/static/my_follow.png"
              iconStyle="width: 38rpx;height: 37rpx;"
              title="我的关注"
              titleStyle="font-family: PingFang-SC-Medium;color:#FFF;font-size: 28rpx;"
              @click="jump('/pages/mine/my_follow/my_follow')"
              isLink
            ></u-cell>
          </u-cell-group>
        </view>
        <view class="content2">
          <u-cell-group :border="false">
            <u-cell
              :border="true"
              icon="/static/setting.png"
              iconStyle="width: 38rpx;height: 38rpx;"
              title="账号与安全"
              titleStyle="font-family: PingFang-SC-Medium;color:#FFF;font-size: 28rpx;"
              @click="jump('/pages/mine/userinfo')"
              isLink
            ></u-cell>
            <u-cell
              :border="false"
              icon="/static/nft_url.png"
              iconStyle="width: 36rpx;height: 30rpx;"
              v-model="value"
              :value="value"
              title="区块链地址"
              titleStyle="font-family: PingFang-SC-Medium;color:#FFF;font-size: 28rpx;"
              @click="NFT"
              isLink
            ></u-cell>
          </u-cell-group>
        </view>
        <view class="content3">
          <u-cell-group :border="false">
            <u-cell
              :border="true"
              icon="/static/contact.png"
              iconStyle="width: 40rpx;height: 37rpx;"
              @click="contact"
              title="联系客服"
              titleStyle="font-family: PingFang-SC-Medium;color:#FFF;font-size: 28rpx;"
              isLink
            ></u-cell>
            <u-cell
              :border="true"
              icon="/static/about_us.png"
              iconStyle="width: 40rpx;height: 37rpx;"
              title="关于我们"
              titleStyle="font-family: PingFang-SC-Medium;color:#FFF;font-size: 28rpx;"
              url="/pages/mine/about_us/about_us"
              isLink
            ></u-cell>
            <u-cell
              @click="clearStorage()"
              :border="false"
              icon="/static/clear.png"
              iconStyle="width: 39rpx;height: 38rpx;"
              title="清除缓存"
              titleStyle="font-family: PingFang-SC-Medium;color:#FFF;font-size: 28rpx;"
              url="/pages/"
              isLink
            ></u-cell>
          </u-cell-group>
        </view>

        <!-- 至信链 -->
        <view class="content4">
          <image src="../../static/zxl_yde.png"></image>
        </view>
      </view>
      <!-- 弹出 -->
      <view @touchmove.stop.prevent="">
        <u-popup
          :show="show"
          :round="20"
          @close="close"
          @open="open"
          mode="center"
          safeAreaInsetBottom="false"
          closeOnClickOverlay="true"
        >
          <view class="contact_us">
            <image
              :show-menu-by-longpress="true"
              src="https://publish.onedaen.com/uploads/publicImg/qrcode.jpg"
            ></image>
            <text
              style="
                font-size: 30rpx;
                color: #4d4d4d;
                text-align: center;
                position: absolute;
                top: 80%;
                left: 0;
                width: 100%;
              "
            >
              长按可添加专属客服企业微信
            </text>
            <view class="box-close" @click="close">
              <image src="/static/close.png" mode="scaleToFill" />
            </view>
          </view>
        </u-popup>
      </view>
      <!-- 链上查询弹出 -->
      <view @touchmove.stop.prevent="">
        <u-popup
          :show="searchLink"
          :round="20"
          @close="close"
          @open="open"
          mode="center"
          :safeAreaInsetBottom="false"
          :closeOnClickOverlay="true"
        >
          <view class="search_link">
            <view class="header" style="text-align: center;">
              <image
                mode="aspectFit"
                style="width: 490rpx; margin: auto; height: 31rpx;"
                src="../../static/searchLink.png"
              ></image>
            </view>
            <view class="content_text">
              <p>链上查询资产方式如下：</p>
              <p>
                第一步: 在「我的」页面区块链地址中复制自己的至信链地址。
              </p>
              <p>
                第二步: 打开「腾讯至信链浏览器」的官方网站："
                <a @click="copy('https://zxscan.qq.com')">
                  https://zxscan.qq.com
                </a>
                "，并在搜索栏中粘贴刚刚复制的至信链账户地址，点击搜索。
              </p>
              <p>
                第三步:
                在搜索出来的数据中，找到自己的购买记录，「IN」代表转入自己账户的记录，即您在卯时发售购买的数字藏品记录。「从」则是官方地址，「到」则是自己的至信链账户地址。
              </p>
              <p>
                第四步:
                如果想查询已购买的数字藏品详细信息便可以点击左侧的“资产列表”进行查询。点击藏品ID即可查询到有关该藏品的所有详细记录。需要注意的是，部分类型数字藏品的铸造需要一定的时间，可在领取后1~2天再进行查询。
              </p>
              <p>
                第五步:
                如需保存藏品主文件，请在我的藏品中复制藏品ID，然后在至信链浏览器中搜索NFT
                ID （藏品ID）查询或在资产列表中点击交易哈希中的NFT
                ID，随后点击作品URL获取。
              </p>
            </view>
            <view class="close_btn" @click="close()">
              <view style="color: #181816;">关闭</view>
            </view>
          </view>
        </u-popup>
      </view>
      <!-- H5登录弹窗 -->
      <loginPop ref="loginPop"></loginPop>
      <ModalPop ref="ModalPop"></ModalPop>
      <clearPop ref="clearPop" @clear="getStorageSize()"></clearPop>
    </view>
  </view>
</template>

<script>
import api from '@/request/api.js'
import jWeixin from '@/node_modules/jweixin-module/lib/index.js'

import loginPop from '@/components/loginPop.vue'
import ModalPop from '@/components/ModalPop.vue'
import clearPop from '@/components/clearPop.vue'
export default {
  data() {
    return {
      hasLogin: false,
      launch: false,
      statusBarHeight: 0,
      titleBarHeight: 0,
      show: false,
      /* 链上查询弹窗 */
      searchLink: false,
      head: 'https://publish.onedaen.com/uploads/static/login_head.png',
      username: '',
      authentication: true,
      myCollectionNum: '',
      is_auth: '',
      value: '',
      userInfo: '',
    }
  },
  components: {
    loginPop,
    ModalPop,
    clearPop,
  },
  onReady() {
    this.verifyLogin()
    const info = uni.getStorageSync('userInfo')
    this.userInfo = info
    let systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight
    let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    this.titleBarHeight =
      (menuButtonInfo.top - this.statusBarHeight) * 2 + menuButtonInfo.height
    const url = location.href
  },
  mounted() {
    this.launch = true
    const url = location.href

    this.configSDK(url, {
      title: '卯时数字 - 进入我的',
      desc: '打造个人数字资产专属空间',
      link: 'https://h5.onedaen.com/pages/mine/mine',
      imgUrl: 'https://publish.onedaen.com/uploads/publicImg/shareLogo.png',
    })
  },
  onShow() {
    if (this.launch) {
      const url = location.href
      this.configSDK(url, {
        title: '卯时数字 - 进入我的',
        desc: '打造个人数字资产专属空间',
        link: 'https://h5.onedaen.com/pages/mine/mine',
        imgUrl: 'https://publish.onedaen.com/uploads/publicImg/shareLogo.png',
      })
    }
    this.verifyLogin()
    const info = uni.getStorageSync('userInfo')
    this.userInfo = info
    let systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight
    let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    this.titleBarHeight =
      (menuButtonInfo.top - this.statusBarHeight) * 2 + menuButtonInfo.height
  },
  onLoad() {
    this.init()
    this.verifyLogin()
    const info = uni.getStorageSync('userInfo')

    this.userInfo = info
    let systemInfo = uni.getSystemInfoSync()
    this.statusBarHeight = systemInfo.statusBarHeight
    let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    this.titleBarHeight =
      (menuButtonInfo.top - this.statusBarHeight) * 2 + menuButtonInfo.height
  },
  methods: {
    async init() {
      const info = await api.myCollection({
        page: 1,
      })

      this.myCollectionNum = info.data.total
    },
    async configSDK(url, { title, desc, link, imgUrl }) {
      // const url = `https://h5.onedaen.com/pages/details/series_detail?id=${this.id}`

      const upUrl = encodeURIComponent(url)
      api.shareData({ url: upUrl }).then((res) => {
        jWeixin.config({
          debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
          appId: res.data.appId, // 必填，公众号的唯一标识
          timestamp: res.data.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
          signature: res.data.signature, // 必填，签名
          jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 必填，需要使用的 JS 接口列表
        })

        jWeixin.ready(() => {
          // 分享给朋友
          jWeixin.updateAppMessageShareData({
            title, // 分享标题
            // desc: this.activity_detail.description, // 分享描述
            desc,
            link: res.data.url,
            imgUrl, // 分享图标
            success: () => {
              // 设置成功
              console.log('设置成功')
            },
          })
          // 分享到朋友圈
          jWeixin.updateTimelineShareData({
            title, // 分享标题
            link: res.data.url,
            imgUrl, // 分享图标
            success: () => {
              console.log('设置成功')
              // 设置成功
            },
          })
        })
      })
    },
    /* 遮罩 */
    close() {
      this.show = false
      this.searchLink = false
      this.showLogin = false
    },
    open() {},
    async getPhoneNumber(e) {
      console.log(e)
    },
    // 跳转页面
    jump(url) {
      const info = uni.getStorageSync('userInfo')
      if (!info.token) {
        this.$refs.ModalPop.open()
        return
      }
      uni.navigateTo({
        url,
      })
    },
    // 复制到剪切板
    copy(text) {
      uni.setClipboardData({
        data: text,
        success: (res) => {
          uni.showToast({
            title: '已复制到剪切板',
            icon: 'none',
          })
        },
      })
    },
    /* 消息中心 */
    noticeCenter() {
      uni.navigateTo({
        url: '../message/notice',
      })
    },
    /* 登录 */
    login() {
      const info = uni.getStorageSync('userInfo')
      if (!info.token) {
        this.$refs.loginPop.open()
      } else {
        uni.navigateTo({
          url: '/pages/mine/userinfo',
        })
      }
    },

    /* 实名认证 */
    verfiy() {
      uni.navigateTo({
        url: '../verify/verify',
      })
    },
    /* 验证登录状态和实名认证 */
    verifyLogin() {
      /* 验证是否登录 */
      let hasLogin = uni.getStorageSync('hasLogin')
      this.hasLogin = hasLogin
      console.log(this.hasLogin)
      if (this.hasLogin == true) {
        uni.getStorage({
          key: 'userInfo',
          success: (res) => {
            console.log(res)
            this.head = res.data.avatarUrl
            this.username = res.data.nickName
            this.hasLogin = res.data.hasLogin
            this.is_auth = res.data.is_auth
            if (res.data.is_auth == 1) {
              this.authentication = true
            } else {
              this.authentication = false
            }
          },
        })
      } else {
        // 未登录
        this.authentication = false
      }
    },
    /* 链上查询 */
    link() {
      this.searchLink = true
    },
    /* 区块链信息 */
    NFT() {
      const info = uni.getStorageSync('userInfo')
      if (!info.token) {
        this.$refs.ModalPop.open()
        return
      }
      let is_auth = this.is_auth
      /* 显示是否实名认证 */
      /* 判断实名认证信息 */
      if (is_auth == 1) {
        this.value = '未认证'
        uni.navigateTo({
          url: '../verify/verify',
        })
      } else if (is_auth == 2) {
        uni.navigateTo({
          url: '../verify/verify_success',
        })
      } else {
        uni.navigateTo({
          url: '../verify/verify',
        })
      }
    },
    /* 联系客服 */
    contact() {
      this.show = true
    },
    /* 用户协议 */
    userAgreement() {
      uni.navigateTo({
        url: '/pages/agreement/user_agreement',
      })
    },
    /* 隐私协议 */
    privacyAgreement() {
      uni.navigateTo({
        url: '/pages/agreement/privacy_agreement',
      })
    },
    // 识别二维码
    checkImg() {
      uni.previewImage({
        urls: ['https://publish.onedaen.com/uploads/publicImg/qrcode.jpg'],
        longPressActions: '长按识别',
        success: (result) => {},
        fail: (error) => {},
      })
    },
    // 退出登录
    logout() {
      uni.removeStorage({
        key: 'userInfo',
        success: function (res) {
          uni.setStorageSync('hasLogin', false)
          uni.reLaunch({
            url: '../index/index',
          })
        },
      })
    },
    /* 清除缓存 */
    getStorageSize() {
      this.logout()
      uni.clearStorageSync()
    },
    clearStorage() {
      this.$refs.clearPop.open()
    },
  },
}
</script>

<style lang="scss">
// #ifdef H5

// #endif
// body.pages-mine-mine{
// 	overflow: hidden !important;
// }
page {
  height: 100vh;
  background-color: #181816;
}

.header {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  .header_bg {
    width: 100%;
    height: 100%;
    top: 0;
    position: absolute;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .header_title {
    position: relative;
    width: 100%;
    height: 130rpx;
    text-align: center;
    line-height: 18rpx;
    z-index: 5;

    text {
      font-family: PingFang-SC-Regular;
      font-size: 34rpx;
      letter-spacing: 0rpx;
      font-weight: bold;
      color: #ffffff;
    }

    .header_nav {
      position: absolute;
      display: flex;
      justify-content: space-between;
      top: 80rpx;
      width: 95%;
      right: 5%;
      height: 60rpx;
      z-index: 5;

      .nft_search {
        // min-width: 180rpx;
        // max-width: 220rpx;

        height: 57rpx;
        padding: 0 18rpx 0 16rpx;
        background-color: rgba(128, 128, 128, 0.15);
        border-radius: 0rpx 28rpx 28rpx 0rpx;

        .nav_content {
          display: flex;
          align-items: center;
          font-size: 26rpx;
          text-align: left;
          color: #54fefd;
          line-height: 60rpx;

          image {
            width: 32rpx;
            height: 32rpx;
            // margin: 12rpx 20rpx;
            margin-right: 18rpx;
          }
        }
      }

      .message_btn {
        width: 42rpx;
        height: 42rpx;
        margin: 9rpx 0;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .header_personal {
    width: 685rpx;
    margin: 60rpx auto;
    display: flex;
    z-index: 5;
    position: relative;

    .about_user {
      display: flex;
      align-items: center;
      width: 100%;
    }
    .customer_head {
      width: 158rpx;
      height: 158rpx;
      border-radius: 50%;
      position: relative;
      display: flex;
      justify-content: center;
      .customer-default {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #494949;
        display: flex;
        align-items: center;
        justify-content: center;
        image {
          width: 50rpx;
          height: 50rpx;
        }
      }
      image {
        width: 100%;
        height: 100%;
        border-radius: 100%;
      }
      .authentication {
        position: absolute;
        bottom: -20rpx;
        width: 120rpx;
        border-radius: 19.5rpx;
        font-size: 24rpx;
        height: 39rpx;
        line-height: 39rpx;
        background-color: #ed4747;
        color: #fff;
        text-align: center;
        vertical-align: middle;
      }
    }

    .login_status {
      color: #ffffff;
      .login {
        margin-left: 32rpx;
      }
      // line-height: 60rpx;
      // margin: 20rpx 10rpx;
      .username {
        // line-height: 130rpx;
        margin-left: 30rpx;
      }
    }

    .verify {
      // width: calc(87rpx * 2);
      // line-height: 126rpx;
      // height: 126rpx;
      position: absolute;
      bottom: 63rpx;
      right: 0;
      button {
        width: 174rpx;
        height: 46rpx;
        // margin: 63rpx;

        background-color: #d2d13e;
        border-radius: 23rpx;
        font-size: 24rpx;
        line-height: 46rpx;
        color: #181816;
        text-align: center;
      }
    }
  }
}

.content {
  width: 90%;
  margin: auto;
  font-family: PingFang-SC-Medium;
  font-size: 28rpx;

  /deep/.u-cell__title-text {
    margin-left: 15rpx;
    line-height: 80rpx !important;
  }

  /deep/.u-cell__body {
    width: 90%;
    margin: auto;
    padding: 5px 0 !important;
  }
  /deep/.u-line {
    width: 90% !important;
    margin: auto !important;
    border-bottom: 1px solid rgba(230, 230, 230, 0.3) !important;
  }

  .content1 {
    margin-bottom: 30rpx;
    border-radius: 20rpx;
    background-color: #242424;
  }

  .content2 {
    margin: 30rpx 0;
    border-radius: 20rpx;
    background-color: #242424;
  }

  .content3 {
    margin: 30rpx 0;
    border-radius: 20rpx;
    background-color: #242424;
  }

  .content4 {
    width: 34%;
    margin: 80rpx auto 60rpx;
    height: 48rpx;
    padding-bottom: env(safe-area-inset-bottom);

    image {
      width: 100%;
      height: 100%;
    }
  }
}

::v-deep .contact_us {
  width: 600rpx;
  height: 600rpx;
  position: relative;
  image {
    width: 300rpx;
    height: 300rpx;
    margin: 150rpx;
  }
  img {
    pointer-events: auto;
  }
}
.box-close {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -30%;
  opacity: 0.5;
  image {
    width: 80rpx;
    height: 80rpx;
    margin: 0;
  }
}
.search_link {
  width: 600rpx;
  margin: auto;
  border-radius: 20rpx;
  background-color: #ffffff;
  .header {
    font-size: 33rpx;
    font-weight: 400;
    letter-spacing: 2rpx;
    padding: 30rpx 0;
    color: #1a1a1a;
    text-align: center;
  }

  .content_text {
    width: 90%;
    margin: auto;
    a {
      display: inline;
      color: #224caf;
    }
    p {
      font-size: 26rpx;
      line-height: 40rpx;
      color: #4d4d4d;
      margin: 10rpx 0;
    }
  }
  .close_btn {
    width: 167rpx;
    margin: 50rpx auto 20rpx;
    height: 65rpx;
    background-image: linear-gradient(270deg, #f0c611 0%, #4effff 100%),
      linear-gradient(#dcb71a, #dcb71a);
    background-blend-mode: normal, normal;
    border-radius: 32rpx;
    color: #000 !important;

    font-size: 26rpx;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    // button {
    //   min-width: 150rpx;
    //   max-width: 180rpx;
    //   margin: auto;
    //   font-size: 26rpx;
    //   height: 60rpx;
    //   line-height: 60rpx;
    //   font-weight: bold;
    //   background-image: linear-gradient(270deg, #f0c611 0%, #4effff 100%),
    //     linear-gradient(#dcb71a, #dcb71a);
    //   background-blend-mode: normal, normal;
    //   border-radius: 32rpx;
    // }
  }
}
/*登录弹框*/
.showLoginMask {
  width: 600rpx;
  margin: auto;
  color: #000 !important;
  .title {
    font-size: 36rpx;
    padding: 30rpx 0;
    font-weight: bold;
    text-align: center;
  }

  .subTitle {
    font-size: 22rpx;
    text-align: center;

    text {
      font-weight: bold;
      color: #999999;
    }
  }

  .input {
    display: flex;
    flex-direction: column;
    width: 85%;
    font-size: 26rpx;
    margin: 60rpx auto 0;

    .phone {
      display: flex;
      width: 100%;
      padding-bottom: 5rpx;
      height: 70rpx;
      line-height: 70rpx;
      border-bottom: 1rpx solid #ccc;

      select {
        width: 120rpx;
        background: none;
        border: 0;
      }

      input {
        height: 70rpx;
        line-height: 70rpx;
        max-width: 40%;
        margin-left: 20rpx;
      }

      button {
        min-width: 160rpx;
        height: 40rpx;
        line-height: 40rpx;
        margin: 15rpx 0;
        font-size: 22rpx;
        font-weight: 300;
        background-color: #4effff;
        border-radius: 20rpx;
        border: 0;
      }
    }

    .code {
      display: flex;
      width: 100%;
      height: 70rpx;
      line-height: 70rpx;
      padding-bottom: 5rpx;
      border-bottom: 1rpx solid #ccc;

      input {
        height: 70rpx;
        line-height: 70rpx;
        max-width: 40%;
        margin-left: 20rpx;
      }
    }
  }

  .submit_btn {
    width: 85%;
    margin: 70rpx auto 30rpx;
    height: 80rpx;
    border: 0;

    button {
      height: 80rpx;
      line-height: 80rpx;
      margin: 30rpx auto;
      background-image: linear-gradient(270deg, #f0c611 6%, #4effff 100%),
        linear-gradient(#dcb71a, #dcb71a);
      background-blend-mode: normal, normal;
      border-radius: 36rpx;
      font-size: 24rpx;
      border: 0;
    }
  }

  .agree_read {
    width: 100%;
    margin: auto;
    font-size: 22rpx;
    letter-spacing: -1rpx;
    color: #999999;
    padding-bottom: 80rpx;
    text-align: center;

    text {
      color: #4effff;
    }
  }
}
/deep/ uni-radio-group {
  display: inline !important;
}
</style>
